<template>
  <div class="home">
    <div class="NavBar">
      <van-nav-bar :title="typeTitle" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="view-scorll">
      <div @click="goBookInfo(item.id)" class="item" v-for="(item, index) in booksList" :key="index">
      
        <img width="85px" height="123px" fit="contain" :src="item.pic" />

        <div class="item-info">
          <div style="align-content:flex-start"><span style="float: left;font-size: 16px;color: rgb(0, 0, 0);">{{item.bookname}}</span></div>
          <div style=" margin-top: 2%;font-size: 14px;color: rgb(102, 100, 100);" class="van-multi-ellipsis--l2">
            {{item.introduction}}
          </div>
          <div style=" margin-top: 2%;font-size: 14px;color: rgb(160, 160, 160); " class="author-ratting">
             <span>{{item.author}}</span>
             <span>{{item.stars}}.0分</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bookrequst from "@/api/book";
import Vue from "vue";
import { NavBar, Divider, Image as VanImage } from "vant";
Vue.use(VanImage);
export default {
  components: {
    [NavBar.name]: NavBar,
    [Divider.name]: Divider,
  },
  data() {
    return {
      typeId:this.$route.query.typeId,
      typeTitle:'',
      booksList: []
    };
  },
  created(){
    this.getTypeBooks()
  },
  methods: {
     onClickLeft() {
      if (window.history.length <= 1) {
        this.$router.push( "/");
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    getTypeBooks() {
      bookrequst.typeBooks(this.typeId).then(res=>{
         this.booksList =res.data.data.bookList
         this.typeTitle = res.data.data.nameType
      })
    },
    goBookInfo(id) {
      this.$router.push({
        path:"/bookinfo",
        query: {
          bookId: id,
        },
      });
    },
  },
};
</script>

<style scoped>
.item {
  display: flex;
  color: rgb(0, 0, 0);
  margin: 14px;
}
.item-info {
  display: flex;
  flex-direction: column;
  margin-left:14px ;
  align-self: center;
}
.author-ratting{
    display: flex;
    justify-content: space-between;
    align-content: center;
}

</style>